<template>
  <div class="list" ref="list">
    <div>
      <div class="item border-bottom" v-for="(item,index) of list" :key="index">
        <div class="img-div"><img src="" alt=""></div>
        <div class="content">
          <div class="name">景点名称景点名称景点名称景点名称</div>
          <div class="desc">景点描述景点描述景点描述景点描述景点描述</div>
          <div class="price">￥<span>150</span>起</div>
        </div>
      </div>
      <div class="load-more">{{loadMore}}</div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'List',
  data () {
    return {
      loadMore: '上拉加载更多',
      list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
    }
  },
  mounted () {
    let that = this
    this.scroll = new Bscroll(this.$refs.list, {
      click: true,
      probeType: 3,
      pullingUpLoad: true
    })

    this.scroll.on('scroll', (pos) => {
      if (this.scroll.maxScrollY > pos.y + 10) {
        that.loadMore = '松手开始加载'
      } else {
        that.loadMore = '加载中...'
      }
    })

    this.scroll.on('touchEnd', (pos) => {
      if (this.scroll.maxScrollY > pos.y + 10) {
        console.log(123)
        setTimeout(() => {
          that.loadMore = '上拉加载更多'
        }, 2000)
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/mixins.styl'
  .list
    overflow hidden
    position absolute
    top 2.46rem
    left 0
    right 0
    bottom 0
    background #eee
    box-sizing border-box
    .item
      display flex
      padding .24rem .32rem
      background #fff
      .img-div
        width 1.6rem
        height 1.6rem
        img
          width 100%
          height 100%
      .content
        flex 1
        padding-left .24rem
        overflow hidden
        .name
          margin-top .08rem
          width 100%
          font-size .32rem
          height .4rem
          line-height .4rem
          font-weight bold
          ellipsis()
        .desc
          width 100%
          margin-top .06rem
          font-size .26rem
          height .3rem
          color #999
          ellipsis()
        .price
          margin-top .26rem
          font-size .26rem
          color red
          text-align right
          span
            font-size .4rem
            font-weight bold
  .load-more
    padding .2rem
    text-align center
    background #fff
    color #999
    font-size .24rem
</style>
